<template>
  <div id="articleDetail">
    <div class="title" v-html="article.title"></div>
    <div class="profile" v-html="article.profile"></div>
    <div class="inner" v-html="article.inner"></div>
  </div>
</template>

<script>
import { getArticleByIdApi } from '@/api/article-detail'
// import { fmtDateToDay } from '@/util/DateUtil'

export default {
  name: 'article-detail',
  data () {
    return {
      id: this.$route.query.id,
      article: {}
    }
  },
  mounted () {
    if (this.id) {
      this.getArticleById(this.id)
    }
  },
  methods: {
    async getArticleById (id) {
      let res = await getArticleByIdApi(id)
      this.article = res.data
      console.log(res)
    }
  }
}
</script>

<style scoped lang="scss">
#articleDetail {
  padding: 30px 40px;
  border: 1px solid #EBEEF5;
  color: #303133;
  -webkit-transition: .3s;
  transition: .3s;
  background-color: #283c3c61 !important;
  border-radius: 4px;
  .title {
    line-height: 40px;
    font-size: 40px;
    /*color: cyan;*/
    background-image: -webkit-linear-gradient(bottom,red,#fd8403,yellow);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
    font-family: SXSGY;
  }
  .profile {
    margin: 0 0 20px 16px;
    text-indent: 32px;
    color: #feb602;
    line-height: 24px;
  }
}
</style>
